<template>
  <div id="sort" class="sort">
      <!-- 顶栏 -->
      <sort-nav-bar></sort-nav-bar>
       <el-main>
         <algorithm-canvas></algorithm-canvas>
         <compare-sort-options-panel></compare-sort-options-panel>
         <code-tracker-panel></code-tracker-panel>
      </el-main>
      
      <!-- 底栏 -->
      <slider></slider>
      <div id="bottom-bar">
        
        <bottom-bar></bottom-bar>
      </div>
    </div> 
    
      
    
</template>

<script>
import CompareSortOptionsPanel from '../../components/common/panel/OptionsPanel/CompareSortOptionsPanel.vue'
import CodeTrackerPanel from '../../components/common/panel/OptionsPanel/CodeTrackerPanel.vue'
import SortNavBar from '../../components/common/navbar/SortNavBar'
import BottomBar from '../../components/common/navbar/BottomBar'
import Slider from '../../components/common/show/Slider'
import AlgorithmCanvas from '../../components/common/show/AlgorithmCanvas'
export default {
  name:'Sort',
  components:{
    SortNavBar,
    BottomBar,
    Slider,
    AlgorithmCanvas,
    CompareSortOptionsPanel,
    CodeTrackerPanel
  },
  
  methods:{
    goCompareSort(){
      this.$router.push('/compareSort')
    },
    goHeapSort(){
      this.$router.push('/heapSort')
    },
    goRadixSort(){
      this.$router.push('/radixSort')
    }
  }
}
</script>


<style scoped>
  .sort{
    background: rgb(247, 206, 206);
    height: 700px;
    width: 1;
  }
  @import "../../assets/css/common.css"
</style>